<template>
  <div class="user-info">
    <el-image style="width: 24px; height: 24px; border-radius: 50%;" :src="data.avatar"></el-image>
    <div class="ml-8 mr-12">
      <EllipsisText :content="data.nick_name" :width="width" show-tooltip />
    </div>
    <div v-if="showRole" :class="['iden', !data.is_admin && 'iden2']">
      {{ data.is_admin ? '管理员' : '成员' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import EllipsisText from '@/components/base-ellipsis-text/index.vue';
defineOptions({
  name: 'BaseTableUserNickname'
});

withDefaults(
  defineProps<{
    data: {
      nick_name?: string;
      avatar?: string;
      is_admin?: boolean;
    };
    width?: number;
    showRole?: boolean;
  }>(),
  {
    data: () => ({}),
    width: 200
  }
);
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  align-items: center;

  .name {
    max-width: 63px;
    margin: 0 5px;
    cursor: pointer;
  }

  .iden {
    padding: 0 8px;
    line-height: 20px;
    color: #fff;
    background: var(--brand-6);
    border-radius: 2px;

    &.iden2 {
      color: #909399;
      background: #e6e8eb;
    }
  }
}
</style>
